<template>
    <div class="flexWrap w-per100">
        <div class="flexWrapBetween job-item" @click="toEdit">
            <div class="j-content">
                <div class="j-title">{{detail.content}}</div>
            </div>
            <div class="w-per100 flexWrapBetween j-buttons">
                <div class="flexWrap">
                    <div v-if="detail.leaderName">
                        <span class="btn-t">参与人：</span>
                        <span class="btn-v" style="color:red">{{detail.leaderName}}</span>
                    </div>
                    <div>
                        <span class="btn-t">状态：</span>
                        <span v-if="detail.status==1" class="btn-v" style="color: #409EFF;">待处理</span>
                        <span v-else-if="detail.status==20" class="btn-v" style="color: #409EFF;">处理中</span>
                        <span v-else-if="detail.status==30" class="btn-v" style="color: #409EFF;">测试中</span>
                        <span v-else-if="detail.status==100||detail.status==110" class="btn-v" style="color: #67C23A;">已完成</span>
                        <span v-else class="btn-v" style="color: #555555">已废弃</span>
                    </div>
                    <div>
                        <span class="btn-t">优先级：</span>
                        <span v-if="detail.p==1" class="btn-v" style="font-weight: bold; color: #F56C6C;">P0急</span>
                        <span v-else-if="detail.p==2" class="btn-v" style="color: #E6A23C">P1高</span>
                        <span v-else-if="detail.p==3" class="btn-v" style="color: #67C23A">P2一般</span>
                        <span v-else class="btn-v" style="color:#555555">P3低</span>
                    </div>
                    <div v-if="detail.deadlineStr">
                        <span class="btn-t">截止日期：</span>
                        <span class="btn-v">{{detail.deadlineStr}}</span>
                    </div>
                </div>
                <div class="flexWrap">
                    <el-button v-if="detail.editable" class="mini-el" type="text" size="mini" @click="toEdit">编辑</el-button>
                </div>
            </div>
        </div>
        <!--编辑-->
        <el-dialog :visible.sync="edit.show" width="550px" append-to-body border :show-title=false :show-close=false>
            <job-edit v-if="edit.show" :info="edit.info"  @complete="jobChanged"/>
        </el-dialog>
    </div>
</template>
<script>
import JobEdit from '@/views/job/components/jobEdit'
export default {
    name: "resource-item",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {
            pAry: [{k:0,n:"P0紧急"},{k:1,n:'P1高'},{k:2,n:'P2普通'},{k:3,n:'P1低'}],

            me:{},
            detail: {},
            edit: {show:false, info:{}}
        };
    },
    components: {
        JobEdit
    },
    created() {
        this.me = this.auth.getAccount()
        this.detail = {...this.info}

        if (!this.detail.status || this.detail.status == 0) {
            this.detail.statusStr = "处理中"
        } else if (this.detail.status == 1) {
            this.detail.statusStr = "已完成"
        }  else {
            this.detail.statusStr = "已废弃"
        }

        let p = parseInt(this.detail.p)
        if (p < this.pAry.length) {
            this.detail.pStr = this.pAry[p].n
        }

        this.detail.userNams = ""
        let userAry = this.consts.users()
        if (this.detail.users) {
            for (let i = 0; i < this.detail.users; i++) {
                for (let j = 0; j < userAry.length; j++) {
                    if (userAry[j].id == this.detail.users[i]) {
                        this.detail.userNams += userAry[j].name
                        if (i + 1 < this.detail.users.length) {
                            this.detail.userNams += "、"
                        }
                        break
                    }
                }
            }
        }
    },
    methods: {
        toEdit(e) {
            this.edit = {show:true, info: {...this.detail}}
        },
        jobChanged(e) {
            if (e) this.detail = e
            this.edit.show = false
        }
    },
};
</script>
<style scoped lang="scss">
.job-item {
    width: 100%; margin: 10px 0 0 0;
    background-color: #f8f8f8; border-radius: 4px;

    .j-content {
        margin: 10px; text-align: left;

        .j-title {width: 100%; font-size: 14px; color: #333333; line-height: 22px; font-weight: normal}
        .j-detail {width: 100%; font-size: 12px; color: #888888; line-height: 16px}
    }

    .j-buttons {
        padding: 0 10px; text-align: left; height: 30px;
        border-top: 1px solid #f0f0f0;

        .btn-t {line-height: 30px; font-size: 11px; color: #aaaaaa}
        .btn-v {line-height: 30px; font-size: 11px; color: #555555; margin-right: 10px; transform: scale(0.8)}
    }
}

</style>
